<template>
  <!-- 1.5 锁具管理 -->
  <!-- 门禁控制下钻页面 -->
  <div class="entrance-guard-page betweenbox">
    <div class="right">
      <router-view class="entrance-view"></router-view>
      <!-- 标题 -->
      <div class="right-top betweenbox">
        <div class="right-top-name centerbox">{{titleName}}</div>
        <div class="right-top-back" @click="goBack"></div>
      </div>
      <!-- 内容 -->
      <div class="right-contain">
        <div class="right-contain-one">
           <EntranceGuardPageCenter/>
        </div>
        <div class="right-contain-two">
          <EntranceGuardPageRight/>
      </div>
    </div>
  </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import LocksMenu from '../../components/LocksMenu/index.vue'
import EntranceGuardPageCenter from './EntranceGuardPageCenter.vue'
import EntranceGuardPageRight from './EntranceGuardPageRight.vue'
import { LocksAPIModule } from "@/store/modules/locks";
@Component({
  components: {
      LocksMenu,
      EntranceGuardPageCenter,
      EntranceGuardPageRight
  },
})
export default class extends Vue {
  get titleName() {
    return LocksAPIModule.oneStationList.name;
  }
  public goBack(val: string) {
    this.$router.push("index");
  }
  mounted(){
    console.log(this.$route.query.code);
  }
}
</script>
<style lang="scss" scoped>
.entrance-guard-page {
  width: 100%;
  height: 100%;
  color: #fff;
  .right {
    width: 100%;
    height: 100%;
    .entrance-view{
      width: 100%;
      height: 100%;
    }
    .right-top {
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      &-name {
        width:66.5%;
        font-size: 0.2rem;
        font-weight: 400;
        color: #76eefa;
      }
      &-back {
        width: 0.9rem;
        height: 0.3rem;
        background: url("../../../../assets/img/return.png") no-repeat center
          center;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
    .right-contain {
      width: 100%;
      height: calc(100% - 0.4rem);
      display: flex;
      &-one {
        width: 10rem;
        height: 100%;
        margin: 0 0.2rem;
      }
      &-two {
        width: 5.3rem;
        height: 100%;
      }
    }
  }
}
</style>






